<template>
  <div class="venue-management">
    <!-- 工具栏 -->
    <div style="margin-bottom: 12px;">
      <el-button type="primary" @click="showCreateDialog = true">新增场所</el-button>
      <el-input v-model="search" placeholder="搜索场所名称/位置" style="width: 300px; margin-left: 12px;" clearable />
    </div>

    <!-- 场所信息表格 -->
    <el-table :data="filteredVenues" border style="width: 100%;">
      <el-table-column label="名称" prop="name" />
      <el-table-column label="位置" prop="location" />
      <el-table-column label="容量" prop="capacity" width="80" />
      <el-table-column label="积分" prop="points" width="100" />
      <el-table-column label="状态" prop="status" width="120">
        <template #default="scope">
          <el-switch
              v-model="scope.row.active"
              @change="toggleStatus(scope.row)"
              active-text="开放"
              inactive-text="关闭"
          />
        </template>
      </el-table-column>
      <el-table-column label="二维码" width="160">
        <template #default="scope">
          <el-button size="small" @click="viewQRCode(scope.row)">查看</el-button>
          <el-button size="small" type="primary" @click="regenerateQRCode(scope.row)">重新生成</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template #default="scope">
          <el-button size="small" @click="editVenue(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteVenue(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑场所弹窗 -->
    <VenueDialog
        v-model:visible="showCreateDialog"
        :venueData="selectedVenue"
        @submit="handleVenueSubmit"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getVenues, deleteVenue, toggleVenueStatus, generateQRCode } from '../utils/venue.js'
import VenueDialog from "@/apps/admin/components/VenueDialog.vue";


const search = ref('')
const showCreateDialog = ref(false)
const selectedVenue = ref({})
const venueList = ref([])

// 获取过滤后的场所列表
const filteredVenues = computed(() => {
  return venueList.value.filter(venue => {
    return (
        venue.name.toLowerCase().includes(search.value.toLowerCase()) ||
        venue.location.toLowerCase().includes(search.value.toLowerCase())
    )
  })
})

// 状态切换处理
const toggleStatus = (venue) => {
  toggleVenueStatus(venue.id, venue.active)
      .then(() => ElMessage.success('状态更新成功'))
      .catch(() => ElMessage.error('状态更新失败'))
}

// 查看二维码
const viewQRCode = (venue) => {
  console.log('查看二维码:', venue)
}

// 重新生成二维码
const regenerateQRCode = (venue) => {
  generateQRCode(venue.id)
      .then((response) => {
        console.log('二维码已重新生成:', response.data)
        ElMessage.success('二维码已重新生成')
      })
      .catch(() => ElMessage.error('二维码生成失败'))
}

// 编辑场所信息
const editVenue = (venue) => {
  selectedVenue.value = { ...venue }
  showCreateDialog.value = true
}

// 删除场所
// const deleteVenue = (venue) => {
//   deleteVenue(venue.id)
//       .then(() => {
//         venueList.value = venueList.value.filter(v => v.id !== venue.id)
//         ElMessage.success('场所删除成功')
//       })
//       .catch(() => ElMessage.error('场所删除失败'))
// }

// 提交场所创建/编辑信息
const handleVenueSubmit = (data) => {
  if (data.id) {
    // 编辑场所
    console.log('编辑场所:', data)
    // 编辑场所的 API 调用
  } else {
    // 新增场所
    console.log('新增场所:', data)
    // 新增场所的 API 调用
  }

  // 关闭弹窗
  showCreateDialog.value = false
}

// 获取场所列表
getVenues().then(response => {
  venueList.value = response.data
}).catch(error => {
  console.error('获取场所列表失败:', error)
})
</script>
